<template>
	<z-container title="收益详情">
		<view class="ss-p-x-40 ss-p-y-32">
			<IncomeInfo />
		</view>
		<z-sticky>
			<view @tap="open" class="fs-28 ss-p-x-32 ss-flex">
				<text class="fc-dark6">时间筛选：</text>
				<text class="fc-dark9 ss-m-r-8">{{ state.date || '请选择' }}</text>
				<z-icon name="arrow-down"></z-icon>
				<view @tap.stop="state.date = '',onReach()" v-if="state.date" class="fc-main fs-24 ss-m-l-24">清除选择</view>
			</view>
			<uv-gap height="12"></uv-gap>
		</z-sticky>
		<view class="ss-p-x-32 ss-p-b-32">
			<view v-for="(item,index) in state.pagination.data" :key="item.id" class="item-box ss-m-b-24">
				<view class="ss-flex ss-row-between">
					<view class="ss-flex-col font-w-500">
						<view class=" fs-36">{{ item.car_number }}</view>
						<view class="fc-dark9 fs-24 ss-m-t-16">{{ sheep.$helper.timeFrom(item.createtime) }}</view>
					</view>
					<view class="fs-30 fc-error">{{ orderStatus[item.status]?.name }}</view>
				</view>
				<applyFlow :info="item" />
				<view class="fs-26 font-w-500 ss-m-t-24">
					<text class="fc-dark9">收益金额：</text>
					<text class="fc-error">￥{{ item.commsion_money }}</text>
				</view>
			</view>
			<z-loadMore :status="state.loadStatus" :list="state.pagination.data" ></z-loadMore>
		</view>
		<uv-calendars ref="calendars" mode="range" :startDate="startDate" :endDate="endDate" @confirm="confirmDate" />
	</z-container>
</template>

<script setup>
	import sheep from "@/sheep";
	import IncomeInfo from "@/pages/index/components/IncomeInfo.vue"
	import applyFlow from "@/pages/components/applyFlow.vue"
	import { orderStatus } from "@/sheep/enu/index.js"
	const pagination = {
	  data: [],
	  current_page: 1,
	  total: 1,
	  last_page: 1,
	};
	const calendars = ref(null)
	const state = reactive({
		loadStatus:'loading',
		pagination: {
		  data: [],
		  current_page: 1,
		  total: 1,
		  last_page: 1,
		},
		date:''
	})
	
	const startDate = computed(() => {
	  return new Date(new Date().setMonth(new Date().getMonth() - 3)).toLocaleDateString();
	});
	const endDate = computed(() => {
	  return new Date().toLocaleDateString();
	})
	
	onLoad(() => {
		getList()
	})
	
	onMounted(() => {
		uni.$on('onReachOrder',() => {
			onReach()
		})
	})
	
	onUnmounted(() => {
		uni.$off('onReachOrder')
	})
	
	function changeCurrent(e){
		state.current = e.index
		onReach()
	}
	
	function open() {
		calendars.value.open();
	}
	
	function confirmDate(e){
		state.date = e.range?.before + ',' + e.range?.after
		onReach()
	}
	
	async function getList(page = 1, limit = 10){
		state.loadStatus = 'loading';
		let res = await sheep.$api.user.commsion_log({
		  limit,
		  page,
		  date:state.date
		});
		uni.stopPullDownRefresh()
		if (res.code === 1) {
		  let list = state.pagination.data.concat(res.data.data);
		  state.pagination = {
		    ...res.data,
		    data: list,
		  };
			
		  if (state.pagination.current_page < state.pagination.last_page) {
		    state.loadStatus = 'loadmore';
		  } else {
		    state.loadStatus = 'nomore';
		  }
		}
	}
	// 加载更多
	function loadmore() {
	  if (state.loadStatus !== 'nomore') {
	    getList(state.pagination.current_page + 1);
	  }
	}
	
	function onReach(){
		  state.pagination = pagination;
		  getList();
		  setTimeout(function () {
		    uni.stopPullDownRefresh();
		  }, 800);
	}
	
	// 上拉加载更多
	onReachBottom(() => {
	  loadmore();
	});
	
	//下拉刷新
	onPullDownRefresh(() => {
	  state.pagination = pagination;
	  getList();
	  setTimeout(function () {
	    uni.stopPullDownRefresh();
	  }, 800);
	});
</script>

<style lang="scss" scoped>
	.item-box {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 24rpx;
	}
</style>